<template>
	<!-- 好友列表 -->
	<view class="friend">
		<!-- 小程序导航栏 -->
		<!-- #ifdef MP-WEIXIN -->
		<view slot="center" class="nav-center">
			<u-search placeholder="请输入内容" @click="handleSearch()" disabled></u-search>
		</view>
		<!-- #endif -->
		<!-- 标签切换 -->
		<u-sticky bgColor="#fff">
			<view class="nav-center">
				<view :class="{'active':tabIndex === index}" @click="changeTab(index)" v-for="(item,index) in tabList"
					:key="index">
					<view class="nav-title">
						{{item.name}}
						<text class="ml-10" v-if="item.count > 0">{{item.count}}</text>
					</view>
				</view>
			</view>
		</u-sticky>
		<!-- 列表 -->
		<swiper :style="swiperStyle" :current="swiperIndex" @animationfinish="animationfinish">
			<swiper-item class="h-full" v-for="(item, index) in swiperList" :key="index">
				<scroll-view class="w-full h-full" scroll-y @scrolltolower="reachBottom">
					<template v-if="item.list.length > 0">
						<view v-for="(item1,index1) in item.list" :key="index1"
						@click="() => goToOwnSpace(item1.userId, item1.name, item1.avatar)">
							<friend-list :item="item1"></friend-list>
						</view>
						<u-loadmore v-if="item.list.length >= 10" :status="loadStatus"></u-loadmore>
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import FriendList from "@/pagesA/friends/friend-list.vue"
	export default {
		components: {
			FriendList
		},
		data() {
			return {
				// 导航标签
				tabIndex: 0,
				tabList: [{
					name: "粉丝",
					count: 10
				}],
				// 列表数据
				swiperIndex: 0,
				swiperHeight: 0,
				swiperList: [],
				// 加载更多
				loadStatus: 'loadmore',
			}
		},
		computed: {
			swiperStyle() {
				return `height: ${this.swiperHeight}px;`
			}
		},
		// 监听原生标题栏搜索输入框点击事件
		onNavigationBarSearchInputClicked() {
			this.handleSearch()
		},
		// 监听原生标题栏按钮点击事件
		onNavigationBarButtonTap(e) {
			uni.navigateBack()
			// this.$u.route({
			// 	type: 'back'
			// })
		},
		onLoad() {
			this.getMyList();
			// 设置swiperHeight
			uni.getSystemInfo({
				success: (res) => {
					// 屏幕高度（screenHeight) = 手机状态栏的高度(statusBarHeight) + 导航栏高度(44px) + 可使用窗口高度(windowHeight)
					// 可使用窗口高度 =  swiper高度 + 其他组件高度
					this.swiperHeight = res.windowHeight - uni.upx2px(80);
				}
			})
		},
		methods: {
			// 搜索
			handleSearch() {
				// this.$u.route('/pages/home/search', {
				// 	type: 'user'
				// })
			},
			// tabbar点击
			changeTab(index) {
				this.tabIndex = index
				this.swiperIndex = index
			},
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				this.changeTab(e.detail.current)
			},
			// scroll-view触底
			reachBottom() {
				// 是否可加载
				if (this.loadStatus !== 'loadmore') return;
				// 加载更多
				this.loadStatus = "loading"
				setTimeout(() => {
					this.getList()
				}, 1000)
			},
			// 获取列表
			getList() {
				const index = this.tabIndex
				// 随机添加5条数据
				for (let i = 0; i < 5; i++) {
					let curr = this.$u.random(0, this.swiperList[index].list.length - 1)
					let data = this.swiperList[index].list[curr]
					this.swiperList[index].list.push(data)
				}
				// 加载更多
				this.loadStatus = "nomore"
			},
			getMyList() {
				// 请求粉丝列表
				uni.request({
					url: 'http://localhost:8081/follow/myFollowers',
					header: {
						'Content-Type': 'application/json',
						'Access-Control-Allow-Headers': 'appId',
						'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',
						'Access-Control-Max-Age': 86400,
						'Authorization': '' + wx.getStorageSync('sessionID')
					},
					method: 'GET',
					success: res => {
						if (res.statusCode === 200) {
							console.log('获取用户粉丝成功');
							console.log(res);
							const dataList = res.data.data.map(item => ({
								name:  item.followerUserName,
								avatar: 'https://flyingfeather-1320611290.cos.ap-guangzhou.myqcloud.com/' + item.followerUserIconUrl,
								userId: item.userId,
								sex: item.followerUserSex,
								age: 0,
								isFollow: true
							}));
							const numSwiperLists = Math.ceil(dataList.length / 5); // 计算 swiperList 数组长度

							this.swiperList = []; // 初始化 swiperList 为空数组

							for (let i = 0; i < numSwiperLists; i++) {
								// 使用 slice 方法按需切割数组并创建对象添加到 swiperList 数组中
								const start = i * 5;
								const end = start + 5;
								const slicedDataList = dataList.slice(start, end);

								this.swiperList.push({
									list: slicedDataList
								});
							}

							console.log(this.swiperList);
						}
					},
					fail: res => {
						console.log('获取用户粉丝失败');
					}
				});
			},
			goToOwnSpace(userId, name, avatar) {
				getApp().globalData.chooseTarId = userId;
				getApp().globalData.chooseTarName = name;
				getApp().globalData.chooseAvatar = avatar;
				uni.navigateTo({
					url: '/pagesA/ownspace/user-space'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.friend {

		// 小程序导航栏
		/* #ifdef MP-WEIXIN */
		/deep/ .u-navbar {

			.u-navbar__content {
				margin-right: 180rpx !important; // 胶囊按钮
			}

			.nav-center {
				width: 100%;
				margin-left: 80rpx; // 返回按钮
			}
		}

		/* #endif */

		// 导航栏
		.nav-center {
			height: 80rpx;
			width: 100%;
			text-align: center;
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			background-color: #fff;

			.nav-title {
				height: 80rpx;
				line-height: 80rpx;
				width: 120rpx;
				font-size: 30rpx;
				padding: 0 15rpx;
				font-weight: bold;
				color: $uni-text-color-gray;
			}

			.active {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;

				.nav-title {
					color: $uni-color-green;
				}
			}

		}
	}
</style>